<template>
  <div id="ck-editer">
    <!-- <ckeditor
      v-model="editorData"
      :editor="editor"
      :config="editorConfig"
      @ready="onReady"
    /> -->
  </div>
</template>

<script>
// import CKEditor from '@ckeditor/ckeditor5-vue'
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document'
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn' // 中文包
import UploadAdapter from './uploadAdapter.js'
export default {

  components: {
    // ckeditor: CKEditor.component
  },
  props: {
    // v-model
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editor: DecoupledEditor,
      editorConfig: {
        // The configuration of the editor.
        language: 'zh-cn'
      }
    }
  },
  computed: {
    editorData: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  mounted() {
    this.initCKEditor()
  },
  methods: {
    onReady(editor) {
      // Insert the toolbar before the editable area.

      editor.ui.getEditableElement().parentElement.insertBefore(
        editor.ui.view.toolbar.element,

        editor.ui.getEditableElement()
      )

      // 自定义上传图片插件
      editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
        return new UploadAdapter(loader)
      }
    }
  }
}
</script>

<style lang="scss">
#ck-editer {
  .ck-content {
    min-height: 400px;
    border: 1px solid #ccc !important;
    background-color: white;
  }
}
</style>
